$( function(){
    class Huawei{
        constructor(){
            this.banner = $(".swiper-selector ul li")
            this.getData()
        }
        // 获取数据
        getData(){
            var options = {
                url : "http://localhost:3000/static/data/index-icon.json",
            }
            ajax(options).then( response => {
                response = JSON.parse(response)
                this.getMainData( response )
            })
        }

        // 获取手写数据 渲染重复部分
        getMainData( response ){
            var options = {
                url : "http://localhost:3000/static/data/index.json",
            }

            axios(options).then( res => {
                this.footerTop( response )
                this.footerMiddleLeft( res )
                this.bindEvent()
            }) 
        }
        bindEvent(){
            // 二级菜单
            $("#server").on( "mouseover" , () => {
                $("#server-list").css({"display":"block"})
            } )
            $("#server").on( "mouseout" , () => {
                $("#server-list").css({"display":"none"})
            } )
            $("#phone").on( "mouseover" , () => {
                $("#phone-list").css({"display":"block"})
            } )
            $("#phone").on( "mouseout" , () => {
                $("#phone-list").css({"display":"none"})
            } )
            $("#cart").on( "mouseover" , () => {
                $("#cart-list").css({"display":"block"})
            } )
            $("#cart").on( "mouseout" , () => {
                $("#cart-list").css({"display":"none"})
            } )
            


            
            

        }

        // x
        footerTop( footer_data ){
            var data = footer_data
            var html = ''
            for( var i = 74 ; i < 78 ; i++ ){
                html += `
                <div class="footer-top-float">
                    <div class="footer-top-title">
                        <img src="${data[i].src}" alt="">
                        <p>${data[i].title}</p>
                    </div>
                </div>`
            }
            $("#footer-top-render").html( html )
        }

        // x
        footerMiddleLeft( footer_data ){
            var data = footer_data.data[0].footer
            var html = ''
            for( var attr in data ){
                html += `<dl class="task clear">
                <dt class="task-title">${data[attr][0]}</dt>`
                for( var i = 1 ; i < data[attr].length ; i++ ){
                    html += `<li>${data[attr][i]}</li>`
                }
                html += '</dl>'
            }
            $("#footer-middle-left-render").html( html )         
        }
    }
          
    new Huawei()
})





